<template>
  <div class="follow">
      <Header>
      <span class="iconfont iconjiantou2" slot="left" @click="$router.back()"></span>
      <span slot="title">我的关注</span>
    </Header>
      <div class="list" >
          <div class="box" v-for="item in followList" :key="item.id">
              <img :src="item.head_img" alt="" >
              <div class="center">
                  <p>{{item.nickname}}</p>
                  <span>{{item.create_date}}</span>
              </div>
              <span>取消关注</span>
          </div>
      </div>
  </div>
</template>

<script>
import Header from '@/components/header.vue'
import {myfollows} from '../apis/users.js'
export default {
    data() {
        return {
            followList:[]
        }
    },
  components: {
    Header
  },

 async mounted() {
      let res = await myfollows()
      console.log(res);
     this.followList = res.data.data 
      console.log(this.followList);
      
      this.followList.map(value=> {
          value.head_img ='http://127.0.0.1:3000' + value.head_img
          return value
      })
  }
}
</script>

<style lang='less' scoped>
.list{
    .box{
        display: flex;
        padding: 25px 10px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        > img{
            display: block;
            width: 50/360*100vw;
            height: 50/360*100vw;
            border-radius: 50%;
            padding: 0 10px;
        }
        > .center{
            flex: 1;
            > p {
                line-height: 30px;
                font-size: 14px;
            }
            > span {
                font-size: 12px;
                color:#999;
            }
        }
        > span {
            height: 30px;
            background-color: #eee;
            font-size: 13px;
            border-radius: 30px;
            line-height: 30px;
            padding: 0px 15px;
        }
    }
}
</style>
